<template>
  <div class="full page">
    <div class="full course-list align-items_center">
      <div
        v-for="(item, index) in courses"
        :key="index"
        class="flex_1 course flex_column"
        :class="{ 'flex_3': course === item.id }"
        @click="onSwitch(item.id)"
      >
        <div class="flex_1">
          <div class="title">{{ item.title }} </div>
          <img :src="item.img" class="image" alt="" />
          <div class="learned-mark" v-if="item.learned">
            <div class="center">
              <CheckCircleOutlined class="icon" />
            </div>
          </div>
        </div>
        <template v-if="course === item.id">
          <div
            class="my_sm align-items_center justify_between"
            v-if="item.learned"
          >
            <div class="unfinished h3">已完成</div>

            <a-button
              type="primary"
              class="btn px_lg"
              @click.stop="onRelearn(item.id)"
              >再次学习</a-button
            >
          </div>
          <div class="my_sm align-items_center justify_between" v-else>
            <a-button type="primary" class="btn px_lg" @click.stop="onLearn(item.id)"
              >开始学习</a-button
            >
            <div class="h3" @click.stop="skip(item.id)">跳过该部分</div>
          </div>
        </template>

        <div class="lock-mark" v-if="item.lock">
          <div class="center">
            <LockOutlined class="icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { LockOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Course',
  components: {
    LockOutlined,
    CheckCircleOutlined,
  },
  setup() {
    const router = useRouter();
    const course = ref(1);

    const courses = ref([
      {
        id: 1,
        title: '运动生产',
        img: '/images/image1.png',
        lock: false,
        learned: false,
      },
      {
        id: 2,
        title: '平抛运动',
        img: '/images/image2.png',
        lock: true,
        learned: false,
      },
      {
        id: 3,
        title: '斜抛运动',
        img: '/images/image3.png',
        lock: true,
        learned: false,
      },
      {
        id: 4,
        title: '巩固测试',
        img: '/images/image4.png',
        lock: true,
        learned: false,
      },
    ]);

    
    const onSwitch = (id: number) => {
      debugger;
      course.value = id;
    };

    const onUnlock = (id: number) => {
      courses.value = courses.value.map(item => {
        if (item.id == id) {
          item.lock = false;
        }
        return item;
      });
    };
    const onLearn = (id: number) => {
 

      courses.value = courses.value.map(item => {
        if (item.id == id) {
          item.learned = true;
        }
        return item;
      });
  

      

      const index = courses.value.findIndex(item => item.id == id);
      if (index === courses.value.length - 1) {
        router.push({ path: '/outcome' });
      }else {
        const next =  courses.value[index + 1]
        course.value = next.id;
        courses.value[index + 1].lock = false
      }
    };

    const skip = (id) => {
      const index = courses.value.findIndex(item => item.id == id);
      if (index === courses.value.length - 1) {
        router.push({ path: '/outcome' });
      }else {
        const next =  courses.value[index + 1]
        course.value = next.id;
        courses.value[index + 1].lock = false
      }
    }

    const onRelearn = (id: number) => {
      courses.value = courses.value.map(item => {
        if (item.id == id) {
          item.learned = false;
        }
        return item;
      });
    };
    return {
      course,
      courses,
      onSwitch,
      onUnlock,
      onLearn,
      onRelearn,
      skip
    };
  },
});
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(
    135deg,
    rgba(61, 130, 209, 1) 0%,
    rgba(60, 155, 207, 1) 35.71%,
    rgba(166, 245, 228, 1) 69.04%,
    rgba(136, 235, 208, 1) 100%
  );
}
.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.course-list {
  padding: 8% 60px;
  .course {
    background: #fff;
    padding: 6px;
    margin: 0 10px;
    height: 100%;
    border-radius: 16px;
    cursor: pointer;
    transition: flex 0.3s linear;
  }
  .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    font-size: 48px;
    color: #fff;
  }
  .lock-mark {
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #d6d6d6;
    color: #fff;
  }

  .icon {
    font-size: 50px;
  }

  .learned-mark {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(#ffffff, 0.5);
    color: #fff;
  }

  .btn {
    border: 2px solid #2a82e4;
    background: #8ac0ff;
    font-size: 24px;
    border-radius: 50px;
    height: unset;
  }
}

.unfinished {
  color: #ff4a4a;
}
</style>
